<template>
  <div>
    <van-nav-bar title="新闻头条-登录" />
    <div>
        <!--
            @submit ->自定义事件(提交事件)

            van-field 输入框(表单一项)
            输入框name = "用户名"
            表单整体提交时，默认收集一个提交对象
            往后台发送的参数名就是name里的值
         -->
      <van-form @submit="onSubmit">
        <van-field
          v-model="user.mobile"
          name="mobile"
          label="手机号"
          placeholder="请输入11位"
          required
          :rules="[{ required: true, message: '请填写正确手机号',pattern:/^1[3-9]\d{9}$/}]"
        />
        <van-field
          v-model="user.code"
          type="password"
          name="code"
          label="密码"
          placeholder="请输入6位密码"
          required
          :rules="[{ required: true, message: '请填写6位数字密码',pattern:/^\d{6}/ }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            :disabled = 'isLoading'
            :loading = 'isLoading'
            loading-text="正在登录中ing..."
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
/*
    目标1：实现顶部导航->自定义样式
    目标2：实现表单组件->读、改、加
    目标3：收集数据以后，调用接口 ->查看登录结果
    目标4：点击登录后给用户提示(正在登录中—————)防止用户频繁点击
*/
import { loginAPI } from '../../api'
import { setToken } from '../../utils/token'
import { Notify } from 'vant'

export default {
  name: 'Login',
  data () {
    return {
      user: {
        mobile: '17777395844', // 手机号
        code: '246810' // 验证码(密码，该项目固定--246810)
      },
      isLoading: false
    }
  },
  methods: {
    async onSubmit (values) {
      console.log('submit', values)
      //   状态这是为true
      this.isLoading = true
      try {
        const res = await loginAPI(this.user)
        Notify({ type: 'primary', message: '登录成功' })
        setToken(res.data.data.token)
        console.log(res)
        // 跳转一定要写在最后->尽量最后执行
        // this.$router.push()---压栈(会产生历史记录)  this.$router.replace()---替换(不会会产生历史记录)
        this.$router.push('/layout/home')
      } catch (error) {
        Notify({ type: 'danger', message: '账号或密码错误' })
      }
      this.isLoading = false
    }
  }
}
</script>

<style scoped lang = 'less'>
/* .van-nav-bar{
    background-color: #007bff;
}
/deep/ .van-nav-bar__title{
    color: #fff;
} */
</style>
